<template>
	<div>
		<el-row :gutter="20">
					<el-col :span="6">
						<el-input v-model="tree.filterText" style="width: 15vw; margin: 5px" size="mini" placeholder="查询" />
						<el-scrollbar :style="{ 'height': tree.screenHeight - 220 + 'px', }">
							<el-tree 
								default-expand-all
								:data="tree.treeData"
								node-key="id"
								:props="tree.defaultProps"
								ref="treeRef"
								@node-click="onNodeClick"
								:filter-node-method="filterNode"
								highlight-current
								:expand-on-click-node="false"
							/>
						</el-scrollbar>
					</el-col>
					<el-col :span="18">
						<el-card shadow="hover" header="硬件配置" body-style="padding:8px; ">
							<div class="system-hardware-container">
								<el-form :inline="false" size="mini" v-for="r in form" :key="r.code">
									<el-form-item label-width="130px" :label="r.title" style="padding-bottom: 5px">
										<el-col :span="11">
											<el-select v-model="r.res1" placeholder="请选择...">
												<el-option v-for="item in r.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
											</el-select>
										</el-col>
										<el-col style="width: 30px; text-align: center">
											<span> - </span>
										</el-col>
										<el-col :span="7">
											<el-input v-model="r.res2" />
										</el-col>
									</el-form-item>
								</el-form>
							</div>
						</el-card>
						<el-row justify="left" style="padding-left: 130px; padding-top: 50px">
							<el-button type="primary" icon="el-icon-check" @click="saveHardware" size="medium">保 存</el-button>
						</el-row>
					</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { queryHardwareDicItem } from '/@/api/dic';
import { saveHardwareConfig, queryHardwareConfig } from '/@/api/common/index';
import { queryOrgans } from '../../../api/organ/index';
import { useStore } from '/@/store/index';
import { Session } from '/@/utils/storage';
export default {
	name: 'systemHardware',
	components: {},
	setup() {
		const store = useStore();
		const treeRef = ref();
		const tree = reactive({
			screenHeight: document.body.clientHeight,
			treeData: [{}],
			defaultProps: {
				children: 'children',
				label: 'label',
				iconClass: 'iconClass',
			},
			tableTreeData: [],
			centerDialogVisible: false,
			filterText: '', 
			pager:{
				page:1,
				pId:null,
				total:0
			}
		}); 
		const state = reactive({
			currentNode: {
				id: 0,
				label: '',
			},
			form: [
				{ title: '条码类型配置', res1: '', res2: '', code: 'yjpz_tiaomaleixin', options: [] },
				{ title: '打印机配置', res1: '', res2: '', code: 'yjpz_dayinji', options: [] },
				{ title: '电子标签配置', res1: '', res2: '', code: 'yjpz_dianzibiaoqian', options: [] },
				{ title: 'RFID打印机配置', res1: '', res2: '', code: 'yjpz_rfiddayin', options: [] },
				{ title: 'RFID检测配置', res1: '', res2: '', code: 'yjpz_rfidjiance', options: [] },
				{ title: '手持机配置', res1: '', res2: '', code: 'yjpz_shouciji', options: [] },
				{ title: '读卡器配置', res1: '', res2: '', code: 'yjpz_dukaqi', options: [] },
				{ title: '高拍仪配置', res1: '', res2: '', code: 'yjpz_gaopaiyi', options: [] },
				{ title: '智能柜配置', res1: '', res2: '', code: 'yjpz_zhinenggui', options: [] },
				{ title: '密集柜配置', res1: '', res2: '', code: 'yjpz_mijigui', options: [] },
				{ title: '签字版配置', res1: '', res2: '', code: 'yjpz_qianziban', options: [] },
				{ title: '环境配置', res1: '', res2: '', code: 'yjpz_huajin', options: [] },
				{ title: '远程示证配置', res1: '', res2: '', code: 'yjpz_yuanchengshizeng', options: [] },
				{ title: '监控配置', res1: '', res2: '', code: 'yjpz_jiankuang', options: [] },
				{ title: '门禁配置', res1: '', res2: '', code: 'yjpz_menjin', options: [] },
				{ title: '服务器配置', res1: '', res2: '', code: 'yjpz_fuwuqi', options: [] },
				{ title: '货架类型', res1: '', res2: '', code: 'ygpz_hjlx', options: [] },
			],
		});
		async function loadHardware() {
			await queryHardwareConfig({organid:state.currentNode.id}).then((res: any) => {
				let rows = JSON.parse(res.data);
				for (let i = 0; i < state.form.length; i++) {
					var row1 = state.form[i];
					var row = rows.find(function (a:any) {
						return a.code == row1.code;
					});
					if(row){
						row1.res1 = row.res1;
						row1.res2 = row.res2;
					}else{
						row1.res1 = '';
						row1.res2 = '';
					}
				}
			});
		}
		(async function () {
			await initOrgans();
		})();
		async function initOrgans() {
			await queryOrgans({page:1}).then((res: any) => {
				tree.treeData = res.data.tree;
				if(tree.treeData.length){
					state.currentNode = res.data.tree[0];
				}
			});
		}
		function onNodeClick(node: any) {
			state.currentNode = node; 
			loadHardware();
		}
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.includes(value);
		}
		async function loadData() {
			await queryHardwareDicItem().then((res: any) => {
				var data = res.data;
				for (var i = 0; i < data.length; i++) {
					var dic = data[i];
					var row = state.form.filter(function (a) {
						return a.code == dic.code;
					})[0];
					row.options = (dic.child || []).map(function (a) {
						return { value: a.code, label: a.name };
					});
					row.options.unshift({ value: '', label: '请选择...' });
				}
				
			});
		}
		loadData();
		async function saveHardware() {
			if(state.currentNode.id == 0){
				ElMessageBox({ message: '请选择一个单位', type: 'error' });
				return;
			}
			var data = state.form.map(function (a) {
				return { title: a.title, res1: a.res1, res2: a.res2, code: a.code };
			});
			await saveHardwareConfig({ configJson: JSON.stringify(data) },{organid:state.currentNode.id}).then((res: any) => {
				if (res.success) {
					ElMessageBox({ message: '保存成功', type: 'success' });
					if(state.currentNode.id == Session.get('userInfo')?.organId){
						store.dispatch("hardware/setHardwareConfig",data);
					}
				} else {
					ElMessageBox({ message: '保存失败', type: 'error' });
				}
			});
		}
		return {
			tree,
			treeRef,
			...toRefs(state),
			saveHardware,
			filterNode,
			onNodeClick,
			loadHardware
		};
	},
	mounted:function(){
		let _self = this;
		setTimeout(function(){
			_self.treeRef.setCurrentKey(_self.currentNode.id);
			_self.loadHardware();
		},100);
		
	}
};
</script>
<style scoped>
.el-form {
	padding-bottom: 2px;
}
</style>
